<template>
	<!-- <keep-alive> -->
	<view class="page-apply-wrapper">
		<custom-nav title="项目申请" themeColor="#333"></custom-nav>
		<view class="apply-header">
			<image class="header-bg" src="../../static/img/serve/head.png"></image>
			<view class="apply-head_info">
				<view class="flow-item flex-act">
					<view class="flow-step">
						<up-icon name="checkmark-circle-fill" color="#FF7139" size="26"></up-icon>
					</view>
					<text>申请人背景</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step">
						<up-icon name="info-circle" color="#999999" size="26"></up-icon>
					</view>
					<text>报读志愿</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step">
						<up-icon name="info-circle" color="#999999" size="26"></up-icon>
					</view>
					<text>其他补充</text>
				</view>


			</view>
		</view>
		<view class="apply-content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<up-form labelPosition="left" :model="model1" :rules="rules" ref="uFormRef">
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">基本信息</text>
							</view>
							<up-form-item label="申请人姓名:" required prop="name" ref="item1" labelWidth="auto">
								<up-input v-model="model1.name" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>

							</up-form-item>
							<up-form-item label="性别:" required prop="sex" ref="sex" labelWidth="auto">
								<view class="flex-r">
								<up-radio-group placement="row" v-model="model1.sex">
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="男">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="2"
										label="女">
									</up-radio>
								</up-radio-group>
								</view>
							</up-form-item>
							<up-form-item label="出生年月:" required prop="birthday" ref="birthday" labelWidth="auto"
								@click="()=>{
								showdatetime=true
							}">
								<up-input readonly v-model="model1.birthday" inputAlign="right" border="none"
									placeholder="请选择" style="text-align: right;"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item required label="申请人身份:" prop="identity_name" ref="Identity" labelWidth="auto"
								@click="()=>{
								 showIdentity=true
							 }">
								<up-input readonly v-model="model1.identity_name" inputAlign="right" border="none"
									placeholder="请选择" style="text-align: right;"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="s-flex-r-b-c">
								<view class="serve-item-header" style="margin-bottom: 0;">
									<text class="head-b"></text>
									<text class="item-tit">申请人就读院校和学历</text>
								</view>
								<up-icon @click="go('addEducation')" name="plus-circle" color="#333333" size="24"></up-icon>
							</view>
							<view class="edu-list">
								<view class="edu" @click="go(`addEducation?form=${JSON.stringify(item)}`)" v-for="(item,index) in eductaionList" :key="index">
									<view class="edu-row1 s-flex-r-b-c">
										<view class="edu">{{item.schoolName}}</view>
										<view class="time s-flex-r-s-c">
											<text>{{item.startDate}} - {{item.endDate}}</text>
											<up-icon name="arrow-right" color="#999999"></up-icon>
										</view>
									</view>
									<view class="edu-row2">
										<text>{{item.readTypeName}} |{{item.speciality}} |{{item.education}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">学术成绩</text>
							</view>
							<!--  @click="()=>{
								showExamSelect=true
							}" -->
							<up-form-item label="内地高考:" prop="collegeExamination" ref="exam" labelWidth="auto">
								<up-input v-model="model1.collegeExamination" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
	<!-- 							<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template> -->
							</up-form-item>
							<up-form-item label="IBDP:" prop="ibdp" ref="item1" labelWidth="auto">
								<up-input v-model="model1.ibdp" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="HKDSE:" prop="hkdse" ref="item1" labelWidth="auto">
								<up-input v-model="model1.hkdse" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="IAL:" prop="ial" ref="item1" labelWidth="auto">
								<up-input v-model="model1.ial" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="其他:" prop="study_other" ref="item1" labelWidth="auto">
								<up-input v-model="model1.study_other" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">英语能力(如有,请填写分数)</text>
							</view>
							<up-form-item label="高考英语成绩:" prop="collegeEnglish" ref="item1" labelWidth="auto">
								<up-input v-model="model1.collegeEnglish" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="大学英语六级:" prop="englishSix" ref="item1" labelWidth="auto">
								<up-input v-model="model1.englishSix" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="大学英语四级:" prop="englishFour" ref="item1" labelWidth="auto">
								<up-input v-model="model1.englishFour" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="雅思总分:" prop="ielts" ref="item1" labelWidth="auto">
								<up-input v-model="model1.ielts" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="托福 (笔试/网考):" prop="toelf" ref="item1" labelWidth="auto">
								<up-input v-model="model1.toelf" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">国际课程</text>
							</view>
							<up-form-item label="IB English Grade:" prop="ibEnglishGrade" ref="item1" labelWidth="auto">
								<up-input v-model="model1.ibEnglishGrade" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="IGCSE English Grade:" prop="igcseEnglishGrade" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.igcseEnglishGrade" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="GCE A-Level/Ial English Grade::" prop="gceEnglish" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.gceEnglish" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="HKDSE English Grade:" prop="hkdseEnglish" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.hkdseEnglish" inputAlign="right" border="none"
									placeholder="请输入分数" style="text-align: right;"></up-input>
							</up-form-item>
							<up-form-item label="其他:" prop="inter_other" ref="item1" labelWidth="auto">
								<up-input v-model="model1.inter_other" inputAlign="right" border="none"
									placeholder="请输入" style="text-align: right;"></up-input>
							</up-form-item>
						</view>
						
					</up-form>

				</view>
			</view>

		</view>
		<view class="apply-btn-wrapper">
			<view class="apply-btn" @click="handleNext">
				<text>下一步</text>
			</view>

		</view>
		<up-picker :show="showExamSelect" title="内地高考" :columns="examList" @confirm="handleConfirmExam"
			@cancel="()=>{showExamSelect=false}"></up-picker>
		<up-picker :show="showIdentity" title="申请人身份" keyName="name" :columns="IdentityList" @confirm="handleConfirmIdentity"
			@cancel="()=>{showIdentity=false}"></up-picker>
		<up-datetime-picker :show="showdatetime" v-model="value1" mode="date" :minDate="752480000"
            :maxDate="17867785550000" format="YYYY-MM-DD"
			@confirm="handleConfirmTime" @cancel="()=>{showdatetime=false}"></up-datetime-picker>
	</view>
	<!-- </keep-alive> -->
</template>

<script setup name="apply">
	import customNav from '@/components/custom-nav.vue'
	import {
		ref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {onLoad,onUnload} from "@dcloudio/uni-app"
	const eductaionList = ref([])
	const id = ref("")
	const uFormRef = ref(null);
	onLoad((e)=>{
		uni.$on('eductaion',(e)=>{
			if(e.index!==undefined){
				if(e.del==1){
					eductaionList.value.splice(e.index ,1)
				}else{
					eductaionList.value[e.index] = e
				}
			}else{
				eductaionList.value.push({...e,index:eductaionList.value.length})
			}
		})
		if(e&&e.id){
			id.value = e.id
			getDetails()
		}
	})
	
	onUnload(()=>{
		uni.$off('eductaion',()=>{})
	})
	const rules = {
		'name': [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}],
		'sex': [{
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change'],
		}],
		'birthday': [{
			required: true,
			message: '请选择出生年月',
			trigger: ['blur', 'change'],
		}],
		'identity_name': [{
			required: true,
			message: '请选择申请人身份',
			trigger: ['blur', 'change'],
		}],
	}
	const showdatetime = ref(false)
	const showExamSelect = ref(false)
	const showIdentity = ref(false)
	const value1 = ref(Date.now())
	const model1 = ref({
		sex: '',
		exam: '',
		Identity: '',
		birthday: '' //出生年月
	})// 获取项目详情
	function getDetails() {
		proxy.$request({
			url: 'api/User/getMyApplyDetail',
			header:"application/x-www-form-urlencoded",
			data: {order_id:id.value}
		}).then(res => {
			model1.value = res.data
			if(res.data.education_json){
				eductaionList.value = res.data.education_json
			}
			model1.value.sex = res.data.sex+''
		})
	}
	const examList = ref([
		[
			'一本',
			'二本',
			'三本',
			'大专'
		]
	])
	const IdentityList = ref([
		[
			'香港永久居民',
			'香港居民',
			'中国内地公民',
			'美国绿卡'
		]
	])
	function getDict() {
		// 申请人身份
		proxy.$request({
			url: 'api/Service/getIdentityLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				IdentityList.value = [res.data]
			}
		})
	}
	getDict()
	function handleNext() {
		if(id.value){
		 return	uni.navigateTo({
				url: `/pages/serve/serveApplyTwo?form1=${JSON.stringify(model1.value)}&id=${id.value}`
			})
		}
		if(eductaionList.value.length==0){
			return uni.$u.toast('请选择申请人就读院校和学历')
		}
		model1.value.education_json=JSON.stringify(eductaionList.value)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				uni.navigateTo({
					url: `/pages/serve/serveApplyTwo?form1=${JSON.stringify(model1.value)}&id=${id.value}`
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});

	}

	function handleConfirmExam(e) {
		model1.value.exam = e.value[0]
		showExamSelect.value = false
	}

	function handleConfirmIdentity(e) {
		model1.value.identity_id = e.value[0].id
		model1.value.identity_name = e.value[0].name
		uFormRef.value.validateField('identity_name');
		showIdentity.value = false
	}

	function handleConfirmTime(e) {
		showdatetime.value = false
		model1.value.birthday = proxy.$u.timeFormat (e.value,'yyyy-mm-dd')
		uFormRef.value.validateField('birthday');
	}
</script>
<style lang="scss" scoped>
	.flex-r{
	width: 100%;
	display: flex;
	
	::v-deep .u-radio-row{
		justify-content: flex-end !important;
	}
	::v-deep .u-radio-group{
		justify-content: flex-end !important;
	}
	}
	.page-apply-wrapper {
		background: #f8f8ff;

		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 1rpx;
					width: 170rpx;
					// background: #fff;
					border-top: 4rpx dashed #FF7139;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {

					// position: relative;



					.flow-step {
						// background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-form-section {
			background: #fff;
			margin-top: 20rpx;
			// border-bottom: 20rpx solid #f8f8f8;
			padding: 32rpx;
			.edu-list{
				margin-top: 20rpx;
				.edu{
					.edu-row1{
						height: 92rpx;
						.edu{
							font-size: 32rpx;
							color: #000000;
							line-height: 38rpx;
							text-align: left;
						}
						.time{
							font-size: 24rpx;
							color: #999999;
							line-height: 28rpx;
						}
					}
					.edu-row2{
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}
			}
		}

		.apply-content {
			position: relative;
			top: -130rpx;
			background: #f8f8ff;

			.apply-form {
				padding-bottom: 60rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn {
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
				width: 686rpx;
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}


	}
</style>